/* eslint-disable import/prefer-default-export */

const getItemStyle = () => ({
    // some basic styles to make the items look a bit nicer
    userSelect: 'none',
    padding: '0 24px 24px 24px',
    margin: '0 0 12px 0',
    maxHeight: '600px',
    minHeight: '200px',
    background: '#fff',
    borderRadius: 4,
    overflow: 'hidden'
});

const getDragItemStyle = () => ({
    background: 'rgba(255,255,255,1)',
    boxShadow: '0px 2px 4px 0px rgba(0,0,0,0.08)',
    borderRadius: 4,
    height: '56px',
    lineHeight: '56px',
    marginBottom: 12,
    fontSize: 16,
    fontWeight: 600,
    color: 'rgba(0, 0, 0, 0.85)',
    textIndent: '24px',
    userSelect: 'none',
    cursor: 'move',
    position: 'relative',
    zIndex: 901
});

const getListStyle = () => ({
    width: '100%',
    minHeight: 'calc(100vh - 350px)'
});

const getPlaceholderStyle = () => ({
    position: 'absolute',
    width: '100%',
    background: 'rgba(0,0,0,0.08)',
    boxShadow: '0px 0px 6px 0px rgba(0,0,0,0.08)',
    borderRadius: '4px',
    fontSize: 16,
    fontWeight: 600,
    color: 'rgba(0, 0, 0, 0.25)',
    textIndent: '16px',
    lineHeight: '48px'
});
export { getItemStyle, getListStyle, getDragItemStyle, getPlaceholderStyle };
